<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟登录  成功  进入列表页面  </title>
<style>
        body {
            margin: 50px 0;
            text-align: center;
            font-family: "PingFangSC-Regular", "Open Sans", Arial, "Hiragino Sans GB", "Microsoft YaHei", "STHeiti", "WenQuanYi Micro Hei", SimSun, sans-serif;
        }
        .inp {
            border: 1px solid #cccccc;
            border-radius: 2px;
            padding: 0 10px;
            width: 278px;
            height: 40px;
            font-size: 18px;
        }
        .btn {
            border: 1px solid #cccccc;
            border-radius: 2px;
            width: 100px;
            height: 40px;
            font-size: 16px;
            color: #666;
            cursor: pointer;
            background: white linear-gradient(180deg, #ffffff 0%, #f3f3f3 100%);
        }
        .btn:hover {
            background: white linear-gradient(0deg, #ffffff 0%, #f3f3f3 100%)
        }
        #captcha1,
        #captcha2 {
            width: 300px;
            display: inline-block;
        }
        .show {
            display: block;
        }
        .hide {
            display: none;
        }
        #notice1,
        #notice2 {
            color: red;
        }
        label {
            vertical-align: top;
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        #wait1, #wait2 {
            text-align: left;
            color: #666;
            margin: 0;
        }
    </style>
</head>
<body style="text-align: center;" >
	</br>
	<button    style="width: 200px;height: 50px;" >登录成功  当前为活动列表页面</button>
	</br>
	<textarea id="textarea"  style="width: 400px;height: 200px;"></textarea>
	</br>
	<img id="image" style="width: 220px;height:220px;" src="http://127.0.0.1:18500/yzm/get?type=秒杀">
	
	<br><br>
<form>
    <h2>滑动demo，使用ajax进行二次验证</h2>
    <br>
    
    <div>
        <label>完成验证：</label>
        <div id="captcha2">
            <p id="wait2" class="show">正在加载验证码......</p>
        </div>
    </div>
    <br>
    <p id="notice2" class="hide">请先完成验证</p>
    <input class="btn" id="submit2" type="submit" value="提交">
</form>
</body>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script type="text/javascript" src="http://sa-p.pflm.cn/hv5/assets-minified/js-core.js"></script>
<script type="text/javascript">
var _path="http://"+window.location.host;
$(function(){
	 
	$.ajax({
		url : _path+'/sys/config/getuser',
		dataType : "text",
		type : "post",
		success : function(data) {
			$('#textarea').val(data);
		},
		error : function(message) {
			layer.alert('网路异常 请稍后再试!');
			randVcode();
		}
	});
	
	 $("#image").click(function(event){
        var obj=this;
        var x=event.offsetX;//获取点击时鼠标相对图片坐标
        var y=event.offsetY;
	    var data={'x':x,"y":y};
	    console.log(data);
	    $.ajax({
            url:_path+"/yzm/check", //ajax提交
            type:"post",
            data:{'x':x,"y":y,"type":"秒杀"},
            success:function(ddd){
            	 console.log(ddd);
            }
        })
 	});
	
	 
	 
	 
});
			 
</script>
<script type="text/javascript">
    var handler2 = function (captchaObj) {
        $("#submit2").click(function (e) {
            var result = captchaObj.getValidate();
            if (!result) {
                $("#notice2").show();
                setTimeout(function () {
                    $("#notice2").hide();
                }, 2000);
            } else {
                $.ajax({
                    url:_path+'/yzm/verify',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        username: $('#username2').val(),
                        password: $('#password2').val(),
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode
                    },
                    success: function (data) {
                        if (data.status === 'success') {
                            alert('登录成功');
                        } else if (data.status === 'fail') {
                            alert('登录失败');
                        }
                    }
                })
            }
            e.preventDefault();
        });
        // 将验证码加到id为captcha的元素里，同时会有三个input的值用于表单提交
        captchaObj.appendTo("#captcha2");
        captchaObj.onReady(function () {
            $("#wait2").hide();
        });
        // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };
    $.ajax({
        url: _path+"/yzm/register?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            // 调用 initGeetest 初始化参数
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                gt: data.gt,
                challenge: data.challenge,
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机，一般不需要关注
                product: "popup", // 产品形式，包括：float，popup
                width: "100%"
                // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
            }, handler2);
        }
    });
</script>

</html>